<template>
  <div class="my" >
    <mt-header class="header">
      <router-link to="/" slot="right">
        <mt-button class="sz">
          <img src="../assets/sz.png" alt="" />
        </mt-button>
      </router-link>
      <router-link to="/" slot="right">
        <mt-button>
          <img src="../assets/msg.png" alt="" />
        </mt-button>
      </router-link>
    </mt-header>
    <div class="container">
      <div class="title" @click="pers" v-if="islogin == 1">
        <div class="ava">
          <img class="avatar" :src="Avatar" alt="" />
        </div>
        <div class="msg">
          <p class="nike">{{nick}}</p>
          <p class="det">点击查看个人信息<img src="../assets/smaj.png" alt="" /></p>
        </div>
      </div>
      <!-- 未登录 -->
      <div class="title" @click="login" v-else>
        <div class="ava">
          <img class="avatar" :src="require(`../../public/avatar/1.jpg`)" alt="" />
        </div>
        <div class="msg">
          <p class="nike">登录/注册</p>
          <p class="det">点击查看个人信息<img src="../assets/smaj.png" alt="" /></p>
        </div>
      </div>
      <div class="icon" @click="login">
        <div class="coll">
          <img src="../assets/coll.png" alt="">
          <p>收藏</p>
        </div>
        <div class="look">
          <img src="../assets/look.png" alt="">
          <p>约看</p>
        </div>
        <div class="rese">
          <img src="../assets/rese.png" alt="">
          <p>预定</p>
        </div>
      </div>
      <div class="three" @click="login">
        <div  class="yh">
          <p>优惠券</p>
          <p>
            <img class="coup" src="../assets/coup.png" alt="">
          </p>
        </div>
        <p style="margin-top:10px;color:#D7D7D7;">|</p>
        <div  class="yh">
          <p>推荐有礼</p>
          <p>
            <img src="../assets/gift.png" alt="">
          </p>
        </div>
      </div>
      <!-- 小图标  Smicon.vue-->
      <div @click="login">
        <smicon></smicon>
      </div>
    </div>
    <tabbar :nav="name"></tabbar>
  </div>
</template>
<script>
import Smicon from "./my/Smicon.vue"
// import Tabbar from "../views/Tabbar.vue"
import {mapState} from "vuex"
export default {
  data(){
    return {
      Avatar:"",
      nick:"",
      name:"me"
    }
  },
  methods:{
    pers(){
      this.$router.push("/myheader")
    },
    login(){
      if(this.islogin == 0){
        this.$router.push("/login")
      } 
    }
  },
  components:{
    Smicon
    // Tabbar
  },
  computed:{
    ...mapState(["user","islogin"])
  },
  mounted(){
    console.log(this.islogin)
    if(this.islogin == 1){
      console.log(this.user)
      this.axios.get(`/bo_user/v1/search/:uid`,{
        params:{
          uid:this.user[0].uid
        }
      }).then(result=>{
        console.log(result.data)
        console.log(result.data[0].avatar)
        this.nick = result.data[0].nickname
        console.log(this.nick)
        this.Avatar = require(`../../public/avatar/${result.data[0].avatar}`)
      })
    }
  }
}
</script>
<style scoped>
.my {
  background-color: #F2F0E8;
  height: 666px;
}
.my > .header {
  background-color: #F2F0E8;
}
.my > .header .sz {
  margin-right: 20px;
}
.my > .container {
  margin:0 20px;
  
}
.my > .container > .title {
  display: flex;
}
.my > .container > .title > .ava{
  width: 60px;height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.my > .container > .title > .ava > .avatar {
  width: 100%;
}
.my > .container > .title > .msg {
  margin-left: 20px;
  margin-top: 5px;
}
.my > .container > .title > .msg > .nike {
  font-size: 28px;
}
.my > .container > .title > .msg > .det {
  font-size: 12px;
  margin-top: 10px;
}
.my > .container > .icon {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.my > .container > .icon p {
  margin-top: 10px;
}
.my > .container > .three {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  background-color: #fff;
  padding: 17px 0;
  border-radius: 5px;
}
.my > .container > .three > .yh {
  display: flex;
}
.my > .container > .three > .yh > p {
  margin: 0 17px; 
}
.my > .container > .three > .yh > p:first-child {
  margin-top: 10px;
}
.my > .container > .three > .yh .coup {
  box-shadow: #ffa500 5px -4px 5px -1px;
}
</style>